<template>
	<page-meta :page-style="'overflow:' + (filterPopShow ? 'hidden' : 'visible')"></page-meta>
	<view class="container">
		<navigator url="/pages/goods/pages/search?type=vip" hover-class="none" class="bc_fff bob_1 box boc_grey"
			id="search-bar">
			<uni-search-bar radius="16" placeholder="输入商品分类、名称" readonly cancelButton="none">
			</uni-search-bar>
		</navigator>
		<u-swiper :list="banners" height="330rpx" circular indicator
			:indicatorStyle="{'text-align': 'center', 'bottom': '20rpx'}" @click="handleClickSwiper">
		</u-swiper>
		<view class="fliter-box">
			<zero-filter-bar ref="zeroFilterBar" :dataList="filterList" :hasFilter="hasFilter" :needSticky="false"
				:extraBtn="false" selectColor="#FE5A1C" @filter='handleFilterItem' />
		</view>
		<view class="ptb_8 plr_12">
			<view class="bc_fff br_8 fx fx_w jcb p_12">
				<GoodsCard :data="item" v-for="item,index in dataList" :key="index" />
			</view>
			<view class="ptb_16">
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>
		<PopupFilter :data="filterParams" :originData="filterOriginParams" :show="filterPopShow" @confirm="handleConfirmFilter"
			@close="filterPopShow=false" />
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import PopupFilter from '@/components/goods/PopupFilter.vue'
	import Empty from '@/components/Empty'
	import dataMixin from '@/mixins/data.js'
	import bannerMixin from '@/mixins/banner.js'
	import filterMixin from '@/mixins/filter.js'
	import api from '@/service/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [dataMixin, bannerMixin, filterMixin],
		components: {
			GoodsCard,
			PopupFilter,
			Empty
		},
		data() {
			return {
				dataInfo: {
					banner: []
				},
				dataList: [],
				listUrl: '/goods/api/product/membershipChainProductList',
				params: {
					orderBy: 0,
					searchName: '',
					userType: this.$store.state.userInfo.identityType || 1,
					customerId: this.$storage.getItem('basicUnserInfo').customerId || '',
					appletType: this.$store.state.appType === this.$base.ADMIN_TYPE ? 0 : 1,
				},
				filterList: [{
						id: 1,
						name: '销量',
						sort: true
					},
					{
						id: 2,
						name: '价格',
						sort: true
					},
					{
						id: 0,
						name: '上新',
					},
					{
						id: 3,
						name: '筛选',
						filter: true,
					},
				], // 筛选项
				filterPopShow: false, // 筛选开关
				bannerId: 12, // banner位置
				noHideLoading: true,
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
			}
		},
		computed: {
			...mapState(['userType', 'appType']),
			// 是否筛选
			hasFilter() {
				const {
					brandSelect,
					styleSelect,
					materialSelect,
					minPrice,
					maxPrice
				} = this.filterParams
				return !!brandSelect || !!styleSelect || !!materialSelect || !!minPrice || !!maxPrice
			}
		},
		onLoad() {
			this.getFilterData()
		},
		onShow() {
			this.noHideLoading = true
			this.getAllData()
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getBannerData(), this.getData(true)]).then(() => {
					uni.hideLoading()
				})
			},
			// 选择筛选项
			handleFilterItem(index, desc, item) {
				switch (index) {
					case 0:
						this.params.orderBy = desc ? 1 : 2
						this.noHideLoading = false
						this.getData(true);
						break;
					case 1:
						this.params.orderBy = desc ? 3 : 4
						this.noHideLoading = false
						this.getData(true);
						break;
					case 2:
						this.params.orderBy = 5
						this.noHideLoading = false
						this.getData(true);
						break;
					case 3:
						this.filterPopShow = !this.filterPopShow
						break;
					default:
						break;
				}
			},
			// 点击商品
			handleClickGoods(item) {
				uni.navigateTo({
					url: '/pages/goods/pages/detail?id=' + item.id
				})
			},
			getFilterData() {
				this.$utils.loading()
				let p = Promise.all([this.getBrandList(), this.getStyleList(), this.getMaterialList()])
				p.finally(() => {
					uni.hideLoading()
				})
			},
			// 获取商品品牌
			getBrandList() {
				if (this.brandId) return true
				return new Promise(resolve => {
					api.get('/goods/api/product/getBrandList', {
						functionRange: this.$store.state.functionRange
					}, {
						noHideLoading: true
					}).then(res => {
						this.$set(this.filterParams, 'brandList', res.data)
						this.$set(this.filterOriginParams, 'brandList', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			// 获取商品风格
			getStyleList() {
				return new Promise(resolve => {
					api.get('/goods/api/product/getStyleList', {}, {
						noHideLoading: true
					}).then(res => {
						this.$set(this.filterParams, 'styleList', res.data)
						this.$set(this.filterOriginParams, 'styleList', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			// 获取商品材质
			getMaterialList() {
				return new Promise(resolve => {
					api.get('/goods/api/product/getMaterialList', {}, {
						noHideLoading: true
					}).then(res => {
						this.$set(this.filterParams, 'materialList', res.data)
						this.$set(this.filterOriginParams, 'materialList', res.data)
					}).finally(() => {
						resolve()
					})
				})
			},
			handleConfirmFilter(data) {
				if (data) {
					this.filterParams = data
				} else {
					this.filterParams = {
						...JSON.parse(JSON.stringify(this.filterOriginParams)),
						brandSelect: '',
						styleSelect: '',
						materialSelect: '',
						minPrice: null,
						maxPrice: null,
					}
				}
				this.filterPopShow = false
				const {
					brandSelect,
					styleSelect,
					materialSelect,
					minPrice,
					maxPrice,
				} = data || this.filterParams
				const {
					brandId,
					styleId,
					materialId,
					startMoney,
					endMoney,
					...otherParams
				} = this.params
				this.params = {
					...otherParams,
					...brandSelect ? {
						brandId: brandSelect
					} : {},
					...styleSelect ? {
						styleId: styleSelect
					} : {},
					...materialSelect ? {
						materialId: materialSelect
					} : {},
					...minPrice ? {
						startMoney: minPrice
					} : {},
					...maxPrice ? {
						endMoney: maxPrice
					} : {},
				}
				this.noHideLoading = false
				this.getData(true)
			},
		},
	}
</script>